<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按摩椅蓝牙控制器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="app-container">
        <!-- 顶部状态栏 -->
        <header class="header">
            <div class="header-left">
                <h1>按摩椅控制器</h1>
                <div class="connection-status" id="connectionStatus">
                    <span class="status-indicator offline" id="statusIndicator"></span>
                    <span id="statusText">未连接</span>
                </div>
            </div>
            <div class="header-right">
                <button class="btn btn-primary" id="scanBtn">扫描设备</button>
                <button class="btn btn-secondary" id="disconnectBtn" disabled>断开连接</button>
            </div>
        </header>

        <!-- 设备列表 -->
        <div class="device-list" id="deviceList" style="display: none;">
            <h3>发现的设备</h3>
            <div class="devices" id="devices"></div>
        </div>

        <!-- 主控制区域 -->
        <main class="main-content">
            <div class="control-grid">
                <!-- 基础控制面板 -->
                <div class="control-panel">
                    <h3>基础控制</h3>
                    <div class="control-group">
                        <label>电源控制</label>
                        <div class="button-group">
                            <button class="btn btn-success" onclick="massageChair.power(true)">开机</button>
                            <button class="btn btn-danger" onclick="massageChair.power(false)">关机</button>
                            <button class="btn btn-warning" onclick="massageChair.pause()">暂停</button>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>工作模式</label>
                        <div class="mode-grid">
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(1)">舒缓模式</button>
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(2)">深层模式</button>
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(3)">伸展模式</button>
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(4)">运动模式</button>
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(5)">睡眠模式</button>
                            <button class="btn mode-btn" onclick="massageChair.setWorkMode(6)">自定义</button>
                        </div>
                    </div>
                </div>

                <!-- 按摩手法控制 -->
                <div class="control-panel">
                    <h3>按摩手法</h3>
                    <div class="technique-grid">
                        <button class="btn technique-btn" onclick="massageChair.setMassageTechnique(1)">揉捏</button>
                        <button class="btn technique-btn" onclick="massageChair.setMassageTechnique(2)">敲打</button>
                        <button class="btn technique-btn" onclick="massageChair.setMassageTechnique(3)">指压</button>
                        <button class="btn technique-btn" onclick="massageChair.setMassageTechnique(4)">滚动</button>
                        <button class="btn technique-btn" onclick="massageChair.setMassageTechnique(5)">震动</button>
                    </div>
                </div>

                <!-- 强度控制 -->
                <div class="control-panel">
                    <h3>强度调节</h3>
                    <div class="control-group">
                        <label>滚轮力度</label>
                        <div class="slider-container">
                            <input type="range" id="rollerIntensity" min="1" max="3" value="2" 
                                   onchange="massageChair.setRollerIntensity(this.value)">
                            <span class="slider-value" id="rollerValue">2</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>气压力度</label>
                        <div class="slider-container">
                            <input type="range" id="airPressure" min="11" max="15" value="13" 
                                   onchange="massageChair.setAirPressure(this.value)">
                            <span class="slider-value" id="airValue">13</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>4D高度</label>
                        <div class="slider-container">
                            <input type="range" id="height4D" min="1" max="6" value="3" 
                                   onchange="massageChair.setHeight4D(this.value)">
                            <span class="slider-value" id="heightValue">3</span>
                        </div>
                    </div>
                </div>

                <!-- 位置控制 -->
                <div class="control-panel">
                    <h3>位置调节</h3>
                    <div class="control-group">
                        <label>零重力</label>
                        <div class="button-group">
                            <button class="btn" onclick="massageChair.setZeroGravity(1)">零重力1</button>
                            <button class="btn" onclick="massageChair.setZeroGravity(2)">零重力2</button>
                            <button class="btn" onclick="massageChair.setZeroGravity(3)">零重力3</button>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>靠背调节</label>
                        <div class="button-group">
                            <button class="btn" onclick="massageChair.sendCommand('BACKREST', 0x01)">靠背上升</button>
                            <button class="btn" onclick="massageChair.sendCommand('BACKREST', 0x02)">靠背下降</button>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>小腿调节</label>
                        <div class="button-group">
                            <button class="btn" onclick="massageChair.sendCommand('CALF_STRETCH', 0x01)">小腿伸展</button>
                            <button class="btn" onclick="massageChair.sendCommand('CALF_STRETCH', 0x02)">小腿收缩</button>
                        </div>
                    </div>
                </div>

                <!-- 加热功能 -->
                <div class="control-panel">
                    <h3>加热功能</h3>
                    <div class="control-group">
                        <div class="switch-container">
                            <label class="switch">
                                <input type="checkbox" id="bodyHeat" onchange="massageChair.setHeating(this.checked, undefined)">
                                <span class="switch-slider"></span>
                                <span class="switch-label">身体加热</span>
                            </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <div class="switch-container">
                            <label class="switch">
                                <input type="checkbox" id="legHeat" onchange="massageChair.setHeating(undefined, this.checked)">
                                <span class="switch-slider"></span>
                                <span class="switch-label">腿部加热</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- 心率监测 -->
                <div class="control-panel">
                    <h3>健康监测</h3>
                    <div class="control-group">
                        <div class="button-group">
                            <button class="btn btn-info" onclick="massageChair.heartRate('detect')">开始心率检测</button>
                            <button class="btn btn-success" onclick="massageChair.heartRate('save')">保存数据</button>
                        </div>
                    </div>
                    <div class="health-data" id="healthData">
                        <div class="health-item">
                            <span class="health-label">心率:</span>
                            <span class="health-value" id="heartRateValue">--</span>
                            <span class="health-unit">bpm</span>
                        </div>
                        <div class="health-item">
                            <span class="health-label">血氧:</span>
                            <span class="health-value" id="bloodOxygenValue">--</span>
                            <span class="health-unit">%</span>
                        </div>
                    </div>
                </div>

                <!-- 设置面板 -->
                <div class="control-panel">
                    <h3>系统设置</h3>
                    <div class="control-group">
                        <label>屏幕亮度</label>
                        <div class="slider-container">
                            <input type="range" id="brightness" min="1" max="5" value="3" 
                                   onchange="massageChair.setScreenBrightness(this.value)">
                            <span class="slider-value" id="brightnessValue">3</span>
                        </div>
                    </div>

                    <div class="control-group">
                        <label>按摩时间 (分钟)</label>
                        <div class="time-buttons">
                            <button class="btn time-btn" onclick="massageChair.setMassageTime(15)">15分</button>
                            <button class="btn time-btn" onclick="massageChair.setMassageTime(30)">30分</button>
                            <button class="btn time-btn" onclick="massageChair.setMassageTime(45)">45分</button>
                            <button class="btn time-btn" onclick="massageChair.setMassageTime(60)">60分</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 状态显示面板 -->
            <div class="status-panel">
                <h3>设备状态</h3>
                <div class="status-grid" id="statusGrid">
                    <div class="status-item">
                        <span class="status-label">工作模式:</span>
                        <span class="status-value" id="workModeStatus">--</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">按摩时间:</span>
                        <span class="status-value" id="timeStatus">--:--</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">滚轮力度:</span>
                        <span class="status-value" id="rollerStatus">--</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">气压力度:</span>
                        <span class="status-value" id="airStatus">--</span>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="bluetooth.js"></script>
    <script src="app.js"></script>
</body>
</html>